<template>
  <div class="components-container">
    <el-row :gutter="20">
      <el-col :span="18" style="backgound-color:dark;">
        <el-card>
          <div slot="header" class="clearfix">
            <span>文件列表</span>
          </div>
          <vxe-toolbar>
            <template #buttons> <vxe-button>搜索</vxe-button></template>
          </vxe-toolbar>
          <vxe-table :align="allAlign" :data="fileList">
            <vxe-column type="seq" width="60" />
            <vxe-column field="fileName" title="文件名" />
            <vxe-column field="fileUrl" title="文件路径" type="html" show-overflow />
            <vxe-column field="file_size" title="文件大小" />
            <vxe-column field="uploadPeople" title="上传人" />
            <vxe-column field="createdTime" title="上传时间" />
            <vxe-column field="updatedTime" title="更新时间" />
          </vxe-table>
          <vxe-pager
            :loading="loading"
            :current-page="pageInfo.page"
            :page-size="pageInfo.pageSize"
            :total="pageInfo.totalResult"
            :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
            @page-change="handlePageChange"
          />
        </el-card>
      </el-col>
      <el-col :span="6" class="upload-demo">
        <el-card>
          <div slot="header" class="clearfix">
            <span>文件上传</span>
          </div>
          <el-upload
            :action="baseUrl"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :headers="headers"
            :on-exceed="handleExceed"
            :file-list="fileUpLoadList"
            :on-success="isSuccessedHandle"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">可以上传任何文件小于10mb的文件</div>
          </el-upload>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import { getAllOssFileByPage } from '@/api/oss-control'
export default {
  name: 'OssControl',
  data() {
    return {
      allAlign: 'left',
      fileList: [],
      fileUpLoadList: [],
      baseUrl: window.location.origin + '/api/admin/uploadFile',
      headers: {
        Authorization: getToken()
      },
      loading: false,
      pageInfo: {
        page: 1,
        pageSize: 7,
        totalResult: 0
      }
    }
  },
  created() {
    this.getAllOssFileByPage(this.pageInfo.page - 1, this.pageInfo.pageSize).then(res => {
      this.fileList = res.data.content
      this.pageInfo.totalResult = res.data.totalElements
      this.fileList.forEach(item => {
        item.fileUrl = `<a href="${item.fileUrl}">文件预览：${item.fileUrl}</a>`
      })
    })
  },
  methods: {
    getAllOssFileByPage(page, size) {
      return getAllOssFileByPage(page, size)
    },
    handlePageChange({ currentPage, pageSize }) {
      this.pageInfo.page = currentPage
      this.pageInfo.pageSize = pageSize
      this.getAllOssFileByPage(currentPage - 1, pageSize).then(res => {
        this.fileList = res.data.content
        this.pageInfo.totalResult = res.data.totalElements
        this.fileList.forEach(item => {
          item.fileUrl = `<a href="${item.fileUrl}">文件预览：${item.fileUrl}</a>`
        })
      })
    },
    handleRemove(file, fileUpLoadList) {
      console.log(file, fileUpLoadList)
    },
    handlePreview(file) {
      console.log(file)
    },
    handleExceed(files, fileUpLoadList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileUpLoadList.length} 个文件`)
    },
    beforeRemove(file, fileUpLoadList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    isSuccessedHandle(response, file, fileUpLoadList) {
      this.getAllOssFileByPage(this.pageInfo.page - 1, this.pageInfo.pageSize).then(res => {
        this.fileList = res.data.content
        this.pageInfo.totalResult = res.data.totalElements
        this.fileList.forEach(item => {
          item.fileUrl = `<a href="${item.fileUrl}">文件预览：${item.fileUrl}</a>`
        })
      })
    }
  }
}
</script>

<style scoped>

</style>

